<template>
  <div class="pie-echart">
    <div class="title">{{ title }}</div>
    <div v-if="isArr">
      <div :class="obj" class="pie" style="height:6rem"/>
      <none-data v-if="isShowNoneData"/>
    </div>
    <div v-else class="pie">
      <div v-for="index in pieObj" :key="index">
        <div :class="obj+index" style="height:6rem"/>
        <none-data v-if="isShowNoneData"/>
      </div>
    </div>

  </div>
</template>
<script>
import noneData from '@/components/noneData/noneData'
export default {
  components: {
    noneData
  },
  // props: ['obj', 'pieTitle', 'formatter', 'title', 'dataSource'],
  props: {
    obj: {
      type: String,
      default: ''
    },
    pieTitle: {
      type: String,
      default: ''
    },
    formatter: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    dataSource: {
      type: [Array, Object],
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      isShowNoneData: false,
      otherAreaName: '其他运营区域',
      areaName: '管辖区域',
      pieObj: [],
      isArr: true,
      charts: ''
    }
  },
  watch: {
    dataSource: function (val) {
      this.showData(val)
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 销毁当前存在的地图
    disposed () {
      if (this.charts) {
        this.charts.dispose()
      }
    },
    pieEchart (data, index) {
      let myRunningWater
      if (index) {
        myRunningWater = this.$echarts.init(document.querySelector('.' + this.obj + index))
      } else {
        myRunningWater = this.$echarts.init(document.querySelector('.' + this.obj))
      }
      this.charts = myRunningWater
      let runningWaterOption = {
        /* title: {
          text: '',
          left: 15,
          top:6,
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        }, */
        series: [{
          name: '',
          type: 'pie',
          radius: '40%',
          center: ['50%', '50%'],
          clickable: false,
          color: ['#70AD47', '#4472C4', '#FFC001', '#A5A5A5', '#ED7D31', '#5B9BD5'],
          label: {
            normal: {
              textStyle: {
                fontWeight: 300,
                fontSize: 12
              },
              formatter: this.formatter
            }
          },
          data: data
        }]
      }
      myRunningWater.setOption(runningWaterOption)
    },

    showData (data) {
      this.disposed()
      let that = this
      if (Array.isArray(data)) {
        that.isArr = true
        if (data.length > 0) {
          for (let i in data) {
            if (data[i].value > 0) {
              this.pieEchart(data)
              this.isShowNoneData = false
              return false
            } else {
              this.isShowNoneData = true
            }
          }
        } else {
          this.isShowNoneData = true
        }
      } else {
        that.isArr = false
        let flag = false
        let pieObjArr = []
        for (let k in data) {
          pieObjArr.push(k)
          let newData = data[k]
          for (let j = 0; j < newData.length; j++) {
            if (newData[j].value > 0) {
              flag = true
            }
          }
          if (flag) {
            this.isShowNoneData = false
            this.$nextTick(() => {
              that.pieEchart(newData, k)
            })
          }
        }
        that.pieObj = pieObjArr
      }
    },

    init () {
      let getRole = JSON.parse(sessionStorage.getItem('getRole'))
      this.areaName = getRole.areaName
    }

  }

}

</script>
<style lang="scss">
.pie-echart {
  position: relative;
  margin-bottom: .20rem;
  .title{
    font-size: .32rem;
    line-height: 160%;
    margin-bottom: .10rem;
    color:#65c4ea;
  }
  .pie{
    border: 1px solid rgba(121, 196, 238, .35);
    background:rgba(47,60,134,.35);
  }
  .title-icon {
    border-radius: .04rem;
    width: .20rem;
    height: .20rem;
    background: #ED7D31;
    display: inline-block;
    margin-right: .10rem;
  }
}

.all-running-money {
  position: absolute;
  right: 5%;
  top: 32%;
  img {
    position: absolute;
    right: 97%;
    top: -95%;
    width: 1rem;
    height: 1.5rem;
  } n
  p {
    color: #fff;
  }
}

.all-operation-money {
  position: absolute;
  left: 0%;
  top: 79%;
  img {
    position: absolute;
    left: 100%;
    top: -238%;
    width: 1rem;
    height: 1.5rem;
  }
  p {
    color: #fff;
  }
}

.yesterday-money {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  text-align: center;
  p {
    text-align: center;
  }
  p:nth-child(1) {
    color: #fff;
    font-size: .44rem;
    strong {
      font-size: 12px;
    }
  }

  p:nth-child(2) {
    color: #138cef;
    font-size: .26rem;
  }
}

</style>
